<template>
	<view @click.stop="()=>onClick()" :style="style" :class="class" class="__lib-checkbox">
		<template v-if="type === 'checkbox'">
			<view v-if="value" class="iconfont icon-checkboxchecked"></view>
			<view v-else class="iconfont icon-checkboxunchecked"></view>
		</template>
		<template v-if="type === 'radiobox'">
			<view v-if="value" class="iconfont icon-radiochecked"></view>
			<view v-else class="iconfont icon-radiounchecked"></view>
		</template>
	</view>
</template>

<script>
	/**
	 * @description 
	 * @property {'checkbox' | 'radiobox'} type 
	 * @property 
	 */

	import {
		Theme
	} from "../../utils/theme/theme.js";
	import {
		Utils
	} from "../../utils/utils/utils.js";

	export default {
		name: 'lib-checkbox',
		emit: [],
		props: {
			type: {
				type: String,
				default: 'checkbox',
				required: false,
			},
			style: {
				type: Object,
				default: () => {
					return {};
				},
				required: false,
			},
			checked: {
				type: Boolean,
				default: false,
				required: false,
			},
			class: {
				type: String,
				default: '',
				required: false,
			},
			/** v-model="aaa" */
			modelValue: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				componentId: Utils.getRandomChars(8),
				value: false,
			}
		},
		methods: {
			onClick(){
				this.value = !this.value;
			}
		},
		created() {
			this.$watch('modelValue', function(newValue, oldValue) {
				// console.log('modelValue已变化：', oldValue, '->', newValue);
				this.value = newValue;
			}, {
				immediate: true
			});
			this.$watch('checked', function(newValue, oldValue) {
				// console.log('modelValue已变化：', oldValue, '->', newValue);
				this.value = newValue;
			}, {
				immediate: true
			});
		},
		mounted() {
			Theme.themeChange(this.componentId, () => {
				this.style.color = Theme.theme.primary;
			});
			this.style.color = Theme.theme.primary;
		},
		updated() {},
		unmounted() {
			Theme.delThemeChange(this.componentId);
		},
		destroyed() {},
		watch: {},
	}
</script>


<style lang="scss">
	@import "../../font/iconfont.css";
	@import "./lib-checkbox.scss";
</style>